<template>
  <el-select size="small" v-model="valueModel" :placeholder="placeholder"
             :multiple="multiple" :multiple-limit="multipleLimit" clearable>
    <el-option v-if="selectAll" label="- 查询全部 -" value=""></el-option>
    <el-option v-for="option in opts" :key="option.value"
               :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import Dictionary from "@/lang/dict/dictionary";
import DictionaryProvider from "../provider/dictionary-provider";

/**
 * 下拉框组件
 */
export default {
    name: "SeaSelect"
    , props: {
        value: {type: [Array, String, Number, Boolean], default: undefined}
        // 数据字典
        , options: {type: [Array, String], default: undefined}
        // 文字提示
        , placeholder: {type: String, default: ''}
        // 选中全部
        , selectAll: {type: Boolean, default: false}
        // 是否多选
        , multiple: {type: Boolean, default: false}
        // 多选上限
        , multipleLimit: {type: Number, default: undefined}
    }
    , data() {
        return {
            // 数据字典
            opts: undefined
        }
    }, model: {
        //需要定义哪一个props可以用v-model绑定属性
        prop: 'value',
        //声明一个事件，调用之后，就会改变父级容器的值
        event: 'handlerValueChange'
    }, computed: {
        valueModel: {
            get: function () {
                //实际使用的是value值
                return this.value;
            },
            set: function (val) {
                //侦听到setter()事件，将值传递回父级组件
                this.$emit('handlerValueChange', val);
                this.$emit('change', val);
            }
        }
    }
    , watch: {
        options: {
            handler: function (val) {
                if (Layers.isNotBlank(val)) {
                    DictionaryProvider(val).then(dic => this.opts = dic.list);
                } else {
                    this.opts = [];
                }
            }
            , immediate: true
        }
    }
}
</script>
